<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>4_getSnapshotBeforeUpdate的使用场景</title>
  <style>
    .list {
      width: 200px;
      height: 150px;
      background-color: skyblue;
      overflow: auto;
    }
    .news {
      height: 30px;
    }
  </style>
</head>
<body>
  <!-- 准备好一个"容器" -->
  <div id="test"></div>

  <!-- 引入React核心库 -->
  <script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作DOM -->
  <script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>
  <!-- 引入prop-types，用于对组件标签属性进行限制 -->
  <script type="text/javascript" src="../js/17.0.1/prop-types.js"></script>

  <script type="text/babel">
    // 1.创建组件
    class NewsList extends React.Component {

      state = {newsArr: []}

      componentDidMount() {
        setInterval(() => {
          // 获取原状态
          const {newsArr} = this.state
          // 模拟一条新闻
          const news = '新闻' + (newsArr.length + 1)
          this.setState({newsArr: [news, ...newsArr]})
        }, 1000)
      }

      getSnapshotBeforeUpdate() {
        return this.refs.list.scrollHeight
      }

      componentDidUpdate(prevProps, prevState, height) {
        this.refs.list.scrollTop += this.refs.list.scrollHeight - height
      }

      render() {
        return (
          <div className="list" ref="list">
            {
              this.state.newsArr.map((n, index) => {
                return <div key={index} className="news">{n}</div>
              })
            }
          </div>
        )
      }
    }

    // 2.渲染组件到页面
    ReactDOM.render(<NewsList/>, document.getElementById('test'))
  </script>
</body>
</html>
